<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>君乐宝酸奶管理系统-库存预警</title>
<link rel="stylesheet" href="${ctx}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/my.css">
</head>
<body>
	<!-- 导航条 -->
	<jsp:include page="/mng/nav.jsp" />
	<!-- /导航条 -->

	<!-- 主容器 -->
	<div class="container" style="margin-top: 76px">
		<div class="row">
			<!-- 功能菜单 -->
			<jsp:include page="/mng/menu.jsp" />
			<!-- /功能菜单 -->

			<!-- 主界面 -->
			<div id="main" class="main col-md-9">
				<!-- 路径导航 -->
				<ol class="breadcrumb" style="border-radius: 0; background: #fff;">
					<li><a href="${ctx}/mng/main.jsp">首页</a></li>
					<li><a href="#">仓库管理</a></li>
					<li class="active">库存预警</li>
				</ol>
				<!-- /路径导航 -->

				<!-- 柱状图 -->
				<div id="container" style="min-width:400px;height:400px"></div>
				<!-- /柱状图 -->

			</div>
			<!-- /主界面 -->
		</div>
	</div>
	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<script src="${ctx}/bootstrap3/js/bootstrap.min.js"></script>
	<script src="${ctx}/js/my.js"></script>
	<script src="${ctx}/Highcharts/js/highcharts.js"></script>
	<script type="text/javascript"
		src="${ctx}/Highcharts/js/highcharts-3d.js"></script>
	<script src="${ctx}/Highcharts/js/modules/exporting.js"></script>
	<script>
	$(function () {
	    $('#container').highcharts({
	        chart: {
	            zoomType: 'xy'
	        },
	        title: {
	            text: '商品库存余量报表'
	        },
	        subtitle: {
	            text: '商品库存预警显示'
	        },
	        xAxis: [{
	            categories: [${cate_zz}],
	            crosshair: true
	        }],
	        yAxis: [{ // Primary yAxis
	            labels: {
	                format: '',
	                style: {
	                    color: Highcharts.getOptions().colors[1]
	                }
	            },
	            title: {
	                text: '数量',
	                style: {
	                    color: Highcharts.getOptions().colors[1]
	                }
	            }
	        }, { // Secondary yAxis
	            title: {
	                text: '',
	                style: {
	                    color: Highcharts.getOptions().colors[0]
	                }
	            },
	            labels: {
	                format: '',
	                style: {
	                    color: Highcharts.getOptions().colors[0]
	                }
	            },
	            opposite: true
	        }],
	        tooltip: {
	            shared: true
	        },
	        legend: {
	            layout: 'vertical',
	            align: 'left',
	            x: 120,
	            verticalAlign: 'top',
	            y: 100,
	            floating: true,
	            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
	        },
	        series: [{
	            name: '现有库存量',
	            type: 'column',
	            data: [${datas}],
	        }, {
	            name: '安全库存量',
	            type: 'spline',
	            data: [${aa}],
	        }]
	    });
	});


</script>
</body>
</html>